<!DOCTYPE html>
<html>
<head>
    <title>开发工具使用及基本标签</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/farbox/basic.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/farbox/main.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>
    
        <a href="./index.html" id="go_to_home"> &lt; home </a>
    
    <div id="sidebar">
        <ul id="sidebar_body">
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./01工具使用及基本标签.html" class="selected">开发工具使用及基本标签</a>
                </li>
            

            
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./02列表与表格与表单标签.html" class="">列表/表格/表单标签</a>
                </li>
            

            
        
            
            
            
            

            
                <li class="level_1 file">
                    <a href="./03网页样式表.html" class="">网页样式表</a>
                </li>
            

            
        
        </ul>
    </div>

    <div id="main">
        <div class="content_body">
            <h1 class="title"> 开发工具使用及基本标签 </h1>
            <div class="doc_post"> <p class="md_block md_has_block_below md_has_block_below_ol">

<div class="toc"><ul>
<li>
<a href="#toc_0">开发工具使用及基本标签</a>
<ul>
<li>
<a href="#toc_1">常用开发IDE开发工具</a>
</li>
<li>
<a href="#toc_2">基本标签</a>
<ul>
<li>
<a href="#toc_3">标题标签:</a>
</li>
<li>
<a href="#toc_4">图片标签</a>
</li>
<li>
<a href="#toc_5">段落与换行标签</a>
</li>
<li>
<a href="#toc_6">水平线标签</a>
</li>
<li>
<a href="#toc_7">超链接标签</a>
</li>
<li>
<a href="#toc_8">特殊符号</a>
</li>
<li>
<a href="#toc_9">注释</a>
</li>
<li>
<a href="#toc_10">开发规范</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>


<h2 id="toc_1">常用开发IDE开发工具</h2>

<p class="md_block">
    <span class="md_line">Dreamweaver,Notepad++,sublimetext,,Hbuilder.<br /></span>
    <span class="md_line">我们以Hbuilder进行讲解.</span>
</p>


<ol>
<li>hbuilder的下载与安装.界面组成</li>
</ol>

<h2 id="toc_2">基本标签</h2>

<ol>
<li>用hbulider创建页面.页面基本组成结构介绍.</li>
<li>基本标签介绍,制作简单图文显示页面.</li>
</ol>

<h3 id="toc_3">标题标签:</h3>

<p class="md_block">
    <span class="md_line">h1 - h6</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span>    <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>一级标题<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>二级标题<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>三级标题<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h4</span><span class="p">&gt;</span>四级标题<span class="p">&lt;/</span><span class="nt">h4</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h5</span><span class="p">&gt;</span>五级标题<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span>六级标题<span class="p">&lt;/</span><span class="nt">h6</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">h1-h6页面显示效果:字体依次变小<br /></span>
    <span class="md_line md_line_dom_embed"><img onerror="this.src='../_image/2017-06-19-10-19-15.jpg';this.onerror=null;"  class="" src="/_image/2017-06-19-10-19-15.jpg" alt="" title="" ></span>
</p>


<h3 id="toc_4">图片标签</h3>

<p class="md_block">
    <span class="md_line">常用的网络四种格式</span>
</p>

<table>
 <thead><tr><th style="text-align:left">图像类型</th>
<th style="text-align:left">优点</th>
<th style="text-align:left">缺点</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">.jpg </td>
<td style="text-align:left"> 体积小,比较清晰 </td>
<td style="text-align:left"> 有损压缩.画面失真</td>
</tr>
<tr><td style="text-align:left">.gif </td>
<td style="text-align:left"> 支持internet标装,支持无损耗压缩和透明度,很流行 </td>
<td style="text-align:left"> 支持有限的透明度,效果不如别的jpg图像</td>
</tr>
<tr><td style="text-align:left">.bmp </td>
<td style="text-align:left"> 支持24位颜色深度,兼容性好 </td>
<td style="text-align:left"> 不支持压缩 容量大</td>
</tr>
<tr><td style="text-align:left">.png </td>
<td style="text-align:left"> 最新的图像格式,兼有gif和jpg的优势 </td>
<td style="text-align:left"> 部分浏览器不支持</td>
</tr>
</tbody> 
</table>
<!--block_code_end-->
<p class="md_block">
    <span class="md_line">img 标签语法</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;图片URL&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;替代文本&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;宽度(单位像素)&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;高度&quot;</span> <span class="p">/&gt;</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_5">段落与换行标签</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>如果没有系统的知识的帮助，先天的才能是无力的。直观能解决很多事，但不是一切。天才和科学结合后才能得到最高的成功。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>立志是一件很重要的事情。工作随着志向走，成功随着工作来，这是一定的规律。立志、工作、成功是人类活动的三大要素。<span class="p">&lt;</span><span class="nt">br</span> <span class="p">/&gt;</span>立志是事业的大门，工作是登堂入室的旅程，这旅程的尽头就有个成功在等待着，来庆祝你的努力结果。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_6">水平线标签</h3>

<p class="md_block">
    <span class="md_line">hr</span>
</p>


<pre><code>&lt;hr /&gt;</code></pre>

<!--block_code_end-->
<blockquote>

<p class="md_block">
    <span class="md_line">注:br  hr img等是自闭合标签,没有结束标签,以/结尾.</span>
</p>

</blockquote>

<p class="md_block">
    <span class="md_line">课堂练习:</span>
</p>

<table>
 <thead><tr><th style="text-align:left">边走边乔</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">我不期望它有多酷，也不期望它有多迷人</td>
</tr>
<tr><td style="text-align:left">更不想用大把的线条和边框桎梏它</td>
</tr>
<tr><td style="text-align:left">在这里，我只是想</td>
</tr>
<tr><td style="text-align:left">听可以让我放松的音乐</td>
</tr>
<tr><td style="text-align:left">写我认为应该记录下的文字</td>
</tr>
<tr><td style="text-align:left">它属于我，也属于你</td>
</tr>
<tr><td style="text-align:left">梦想是绚烂的，奔赴梦想的途中同样风光无限——</td>
</tr>
<tr><td style="text-align:left">边走边“乔”，享受林间洒落一地的春光......</td>
</tr>
</tbody> 
</table>
<!--block_code_end-->
<p class="md_block md_has_block_below md_has_block_below_img">
    <span class="md_line md_line_dom_embed"><img onerror="this.src='../_image/2017-06-19-11-04-43.jpg';this.onerror=null;"  class="" src="/_image/2017-06-19-11-04-43.jpg" alt="" title="" ><br /></span>
    <span class="md_line">代码截图</span>
</p>

<img onerror="this.src='../_image/2017-06-19-11-09-58.jpg';this.onerror=null;"  class="" src="/_image/2017-06-19-11-09-58.jpg" alt="" title="" >
<h3 id="toc_7">超链接标签</h3>

<p class="md_block">
    <span class="md_line">a</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.baidu.com&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block md_has_block_below md_has_block_below_ol">
    <span class="md_line">超链接的分类</span>
</p>


<ol>
<li>页面间链接:页面间跳转</li>
<li>
<p class="md_block">
    <span class="md_line">锚链接:页面内的某个锚</span>
</p>


<pre><code>描:用a标签给个name属性.  链接地方用#加锚名称.</code></pre>

<!--block_code_end--></li>
<li>
<p class="md_block">
    <span class="md_line">功能性链接</span>
</p>


<p class="md_block">
    <span class="md_line">href = &quot;mailto:huodeming1@163.com&quot;</span>
</p></li>
</ol>

<h3 id="toc_8">特殊符号</h3>

<p class="md_block">
    <span class="md_line">如 &lt;&gt; 等,在HTML中.可以用字符实体.三部分组成  <code>&amp;nbsp;</code>表示空格.</span>
</p>


<h3 id="toc_9">注释</h3>

<p class="md_block">
    <span class="md_line md_line_dom_embed"><code>&lt;!--注释内容--&gt;</code></span>
</p>


<h3 id="toc_10">开发规范</h3>

<p class="md_block">
    <span class="md_line">标签名及属性名必须小写<br /></span>
    <span class="md_line">标签必须闭合,单标签用/结束 <br /></span>
    <span class="md_line">属性值必须使用引号括起来,一般推荐双引号<br /></span>
    <span class="md_line">标签必须正确嵌套,不能交叉<br /></span>
    <span class="md_line">属性从Xhtml开始,必须写完整的属性名与值.不能只写属性名<br /></span>
    <span class="md_line">必须使用文档类型申明</span>
</p> </div>
        </div>

    </div>





<script>
    // auto focus for menu
    window.onload = function(){
        var sidebar = document.getElementById('sidebar');
        var current = document.getElementsByClassName('selected')[0];
        if (current && sidebar){
            sidebar.scrollTop = current.offsetTop - sidebar.clientHeight/2 + 100
        }
    };
</script>




</body>

</html>